<script lang="ts" setup>
import tzLoading from '@/components/tz-loading.vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'

const appStore = useAppStore()



const tableData = ref([])


const handlePositiveClick = (row) => {
  alarmsettingDelbyid(row.id).then(res => {
    toast('删除成功')
    openTableDialog()
  })

}

const dialogVisible = ref(false)
const openDialog = () => {
  dialogType.value = 'add'
  dialogVisible.value = true
}
const openEditDialog = (row) => {
  dialogType.value = 'edit'
  rowID.value = row.id
  Object.keys(ruleForm).forEach(v => {
    ruleForm[v] = row[v]
  })
  dialogVisible.value = true
}


const dialogType = ref('add')
const rowID = ref('')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({

  equipentid: '',//设备id
  alarmLevel: 1,//告警等级
  gjtype: 0,//告警类型 
  islight: 0,//告警是否亮灯
  lightco: 1,//灯光颜色 
  maxy: '',//大于最大值
  miny: '',//小于最小值
  zd: '',//（告警字段（英文）	
  zdname: '',//告警字段（中文）
})

const rules = reactive<FormRules<RuleForm>>({
  equipmentid: [
    { required: true, message: '请填写设备编号', trigger: 'blur' },
  ],
  type: [
    { required: true, message: '请选择传感器类型', trigger: 'blur' },
  ],
})


const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!', ruleForm)
      if (dialogType.value == 'add') {
        let Q = { ...ruleForm }
        Q.equipentid = gridID.value
        alarmsettingInsert(Q).then(res => {
          toast('新增成功')
          openTableDialog()
        })
      } else {
        let Q = { ...ruleForm }
        Q.equipentid = gridID.value
        Q.id = rowID.value
        alarmsettingUpdate(Q).then(res => {
          openTableDialog()
        })
        toast('修改成功')
      }


      dialogVisible.value = false
    } else {
      console.log('error submit!', fields)
    }
  })
}


const closeFn = () => {
  Object.keys(ruleForm).forEach(v => {
    ruleForm[v] = ''
  })
  rowID.value = ''
  ruleForm.alarmLevel = 1
  ruleForm.gjtype = 0
  ruleForm.islight = 0
  ruleForm.lightco = 1
}


const loading = ref(false)


const searchForm = reactive({
  projectid: ''
})

const transducerOptions = ref([
  {
    value: 1,
    label: 'ISO4406',
  },
  {
    value: 2,
    label: 'Nas1638',
  },
  {
    value: 3,
    label: 'SAEAS4059',
  },
  {
    value: 4,
    label: 'GJB420B',
  },
])


const projectoptions = ref([])
// 获取项目列表
const getprojectData = () => {
  tProjectControllerSellist().then(res => {
    projectoptions.value = res.result.map(v => {
      return {
        value: v.id,
        label: v.name,
      }
    })
  })
}

getprojectData()


const filterFn = (obj, row) => {
  let item = obj.find(v => v.value === row)
  // console.log(item)
  // console.log(obj)
  console.log(row)
  return item ? item.label : ''
}


const changeselect = (e) => {
  let item = optionsList.value.find(v => v.value == e)
  if (item) {
    console.log(item)
    ruleForm.zdname = item.label
  }
  console.log(ruleForm)

}


const getData = () => {
  loading.value = true
  // 获取设备列表

  tProjectControllerSelequipmentbyid(searchForm.projectid).then(res => {
    tableData.value = res.result
  }).finally(() => {
    loading.value = false
  })

}

const optionsList = ref([])  // 不同传感器的中英文字段
const options1 = ref([
  {
    label: '一级告警',
    value: 1
  },
  {
    label: '二级告警',
    value: 2
  },
  {
    label: '三级告警',
    value: 3
  },
])  // 告警等级
const options2 = ref([
  {
    label: '区间外告警',
    value: 0
  },
  {
    label: '区间内告警',
    value: 1
  },
])  // 告警类型

const options3 = ref([
  {
    label: '不亮灯',
    value: 0
  },
  {
    label: '亮灯',
    value: 1
  },
])  // 告警是否亮灯
const options4 = ref([
  {
    label: '黄色',
    value: 1
  },
  {
    label: '红色',
    value: 2
  },
])  // 灯光颜色

// 报警弹框
const gridData = ref([])
const dialogTableVisible = ref(false)
const DLoading = ref(true)
const gridID = ref('')


// 
const openTableDialog = (row) => {
  console.log(row, 'row')
  DLoading.value = true
  dialogTableVisible.value = true
  if (row) {
    gridID.value = row.id

    alarmsettingSelgjcsbytype(row.type).then(res => {
      optionsList.value = res.result.map(v => {
        return {
          label: v.name,
          value: v.value
        }
      })
    })

  }
  alarmsettingSelbyequipmentid({
    id: gridID.value,
    index: 1,
    size: 100
  }).then(res => {
    gridData.value = res.result
  }).finally(() => {
    DLoading.value = false
  })




}




</script>

<template>
  <tzLoading v-if="loading"></tzLoading>

  <div class="flex flex-col flex-1 overflow-auto" v-else>
    <div class="h-[13%]"></div>
    <div class="px-[25px] flex">

      <el-form-item label="项目">
        <el-select v-model="searchForm.projectid" placeholder="请选择项目" @change="getData()">
          <el-option v-for="item in projectoptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>

      <!-- <el-button class="w-[90px] ml-auto flex justify-center items-center" color="#0c9bc8" @click="getData()">
        <span class="text-[16px] font-medium text-white">查询</span>
      </el-button> -->


    </div>
    <div class="flex-1 p-[25px] overflow-auto">
      <el-table :data="tableData" style="width: 100%">


        <el-table-column prop="equipmentid" label="设备编号" />
        <!-- <el-table-column prop="aa" label="水分参数A" />
        <el-table-column prop="bb" label="水分参数B" />
        <el-table-column prop="cc" label="酸值参数C" />
        <el-table-column prop="dd" label="酸值参数D" /> -->
        <el-table-column prop="comk" label="端口号" />
        <el-table-column prop="ip" label="设备ip地址" />
        <!-- <el-table-column prop="jck" label="击穿电压参数k" />
        <el-table-column prop="jcb" label="击穿电压参数b" /> -->
        <el-table-column prop="typeName" label="传感器类型名称" />
        <el-table-column prop="kldbz" label="颗粒度标准">
          <template #default="scope">
            <div>
              {{ filterFn(transducerOptions, scope.row.kldbz) }}
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="nd100" label="100度粘度标准" />
        <el-table-column prop="nd40" label="40度粘度标准" />
        <el-table-column prop="ybcom" label="油泵端口" />
        <el-table-column prop="ybip" label="油泵ip" /> -->



        <el-table-column label="操作" width="150">
          <template #default="scope">
            <el-button size="small" type="warning" @click="openTableDialog(scope.row)">
              <span>查看报警</span>
            </el-button>

          </template>
        </el-table-column>

      </el-table>
    </div>
    <div class="h-[20px]"></div>


    <el-dialog v-model="dialogTableVisible" title="告警设置列表" width="80%">
      <el-button @click="openDialog" class="w-[90px] mb-[20px]  flex justify-center items-center" color="#009757">
        <span class="text-[16px] font-medium text-white">新增</span>
      </el-button>
      <el-table :data="gridData" v-loading="DLoading">
        <el-table-column property="alarmLevel" label="告警等级" />
        <el-table-column property="alarmName" label="告警名称" />
        <el-table-column property="maxy" label="大于最大值" />
        <el-table-column property="miny" label="小于最小值" />
        <el-table-column property="zd" label="告警字段（英文）" />
        <el-table-column property="zdname" label="告警字段（中文）" />

        <el-table-column prop="gjtype" label="告警类型">
          <template #default="scope">
            <div>
              <el-tag :type="scope.row.gjtype == 0 ? 'warning' : 'danger'">{{ scope.row.gjtype == 0 ? " 区间外告警" : "区间内告警"
              }}</el-tag>
            </div>
          </template>
        </el-table-column>


        <el-table-column prop="gjtype" label="告警是否亮灯">
          <template #default="scope">
            <div>
              <el-tag :type="scope.row.gjtype == 0 ? 'info' : 'danger'">{{ scope.row.gjtype == 0 ? "不亮灯" : "亮灯"
              }}</el-tag>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="gjtype" label="灯光颜色">
          <template #default="scope">
            <div>
              <el-tag :type="scope.row.gjtype == 1 ? 'warning' : 'danger'">{{ scope.row.gjtype == 1 ? "黄色" : "红色"
              }}</el-tag>
            </div>
          </template>
        </el-table-column>


        <el-table-column property="createTime" label="创建时间" />


        <el-table-column label="操作" width="150">
          <template #default="scope">
            <el-button size="small" type="warning" @click="openEditDialog(scope.row)">
              <span>修改</span>
            </el-button>

            <!-- <n-popconfirm @positive-click="handlePositiveClick(scope.row)" overlap>
              <template #trigger>
                <el-button size="small" type="danger">
                  <span class="text-white">删除</span>
                </el-button>
              </template>
              确定要删除吗？
            </n-popconfirm> -->
            <el-popconfirm confirm-button-text="Yes" cancel-button-text="No" @confirm="handlePositiveClick(scope.row)"
              title="确定要删除吗？">
              <template #reference>
                <el-button size="small" type="danger">
                  <span class="text-white">删除</span>
                </el-button>
              </template>
            </el-popconfirm>

          </template>
        </el-table-column>


      </el-table>


      <el-dialog v-model="dialogVisible" :title="dialogType == 'add' ? '新增设置' : '编辑设置'" width="600px" top="20vh"
        @close="closeFn" destroy-on-close>
        <div class="flex justify-center gap-[30px]">
          <div class="flex-1 flex flex-col items-center">


            <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto" style="width: 100%;"
              class="demo-ruleForm flex-1" status-icon>


              <el-row>


                <el-col :span="12">
                  <el-form-item label="告警等级" prop="alarmLevel">
                    <el-select v-model="ruleForm.alarmLevel" placeholder="请选择告警等级">
                      <el-option v-for="(item, index) in options1" :key="index" :label="item.label" :value="item.value" />
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="告警类型" prop="gjtype">
                    <el-select v-model="ruleForm.gjtype" placeholder="请选择告警类型">
                      <el-option v-for="(item, index) in options2" :key="index" :label="item.label" :value="item.value" />
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="告警是否亮灯" prop="islight">
                    <el-select v-model="ruleForm.islight" placeholder="请选择告警是否亮灯">
                      <el-option v-for="(item, index) in options3" :key="index" :label="item.label" :value="item.value" />
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="灯光颜色" prop="lightco">
                    <el-select v-model="ruleForm.lightco" placeholder="请选择灯光颜色">
                      <el-option v-for="(item, index) in options4" :key="index" :label="item.label" :value="item.value" />
                    </el-select>
                  </el-form-item>
                </el-col>




                <el-col :span="12">
                  <el-form-item label="大于最大值" prop="maxy">
                    <el-input v-model="ruleForm.maxy" />
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="小于最小值" prop="miny">
                    <el-input v-model="ruleForm.miny" />
                  </el-form-item>
                </el-col>


                <el-col :span="12">
                  <el-form-item label="告警字段" prop="zdname">
                    <el-select @change="changeselect" v-model="ruleForm.zd" placeholder="请选择告警字段">
                      <el-option v-for="(item, index) in optionsList" :key="index" :label="item.label"
                        :value="item.value" />
                    </el-select>
                  </el-form-item>
                </el-col>

              </el-row>

            </el-form>

          </div>
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="submitForm(ruleFormRef)">
              <span class="text-white">确定</span>
            </el-button>
          </div>
        </template>
      </el-dialog>




    </el-dialog>






  </div>
</template>

<style scoped>
:deep(.el-table__row) {
  background-color: #f3fdf1;
}

:deep(th>.el-table__cell) {
  background-color: #0f914c;
}

:deep(.el-table th.el-table__cell) {
  background-color: #0e904c;
}


:deep(.el-table th.el-table__cell .cell) {
  color: #fff;
}
</style>
